<template>
  <a-config-provider :locale="locale">
    <div id="picture-search-form">
      <!--    搜索表单-->
      <a-form layout="inline" :model="searchParams" @finish="doSearch">
        <a-form-item label="关键词">
          <a-input
            v-model:value="searchParams.searchText"
            placeholder="从名称和简介搜索"
            allow-clear
          />
        </a-form-item>
        <a-form-item name="category" label="分类">
          <a-auto-complete
            v-model:value="searchParams.category"
            placeholder="请输入分类"
            :options="categoryOptions"
            allow-clear
          />
        </a-form-item>
        <a-form-item name="tags" label="标签">
          <a-select
            v-model:value="searchParams.tags"
            mode="tags"
            placeholder="请输入标签"
            :options="tagOptions"
            allow-clear
          />
        </a-form-item>

        <a-form-item label="名称" name="name">
          <a-input v-model:value="searchParams.name" placeholder="请输入名称" allow-clear />
        </a-form-item>
        <a-form-item label="简介" name="introduction">
          <a-input v-model:value="searchParams.introduction" placeholder="请输入简介" allow-clear />
        </a-form-item>

        <a-form-item label="日期" name="dateRange">
          <a-range-picker
            style="width: 400px"
            show-time
            :placeholder="['编辑开始时间', '编辑结束时间']"
            :v-model:value="dataRange"
            format="YYYY/MM/DD HH:mm:ss"
            :presets="rangePresets"
            @change="onRangeChange"
          />
        </a-form-item>

        <a-form-item label="宽度" name="picWidth">
          <a-input-number v-model:value="searchParams.picWidth" />
        </a-form-item>
        <a-form-item label="高度" name="picHeight">
          <a-input-number v-model:value="searchParams.picHeight" />
        </a-form-item>

        <a-form-item label="格式" name="picFormat">
          <a-input v-model:value="searchParams.picHeight" placeholder="请输入格式" allow-clear />
        </a-form-item>

        <a-form-item>
          <a-space>
            <a-button type="primary" html-type="submit" style="width: 96px">搜索</a-button>
            <a-button html-type="reset" style="width: 64px" @click="doClean">重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>
      <div style="margin-bottom: 20px"></div>
    </div>
  </a-config-provider>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import dayjs from 'dayjs'

dayjs.locale('zh-cn')
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import 'dayjs/locale/zh-cn'
import { listPictureTagCategoryUsingGet } from '@/api/pictureController.ts'
import { message } from 'ant-design-vue'

// 定义属性
interface Props {
  onSearch?: (searchParams: API.PictureQueryRequest) => void
}

const props = defineProps<Props>()

// 直接定义 locale 变量
const locale = zhCN

//定义数据

const dataList = ref<API.Picture[]>([])
const total = ref(0)

//搜索条件
const searchParams = reactive<API.PictureQueryRequest>({})

//搜索
const doSearch = () => {
  props.onSearch?.(searchParams)
}

const onChange = (date: Dayjs) => {
  if (date) {
    console.log('Date: ', date)
  } else {
    console.log('Clear')
  }
}

const dataRange = ref<[]>([])

/**
 * 日期范围更改时触发
 * @param dates
 * @param dateStrings
 */
const onRangeChange = (dates: any[], dateStrings: string[]) => {
  if (dates?.length >= 2) {
    searchParams.startEditTime = dates[0].toDate()
    searchParams.endEditTime = dates[1].toDate()
  } else {
    searchParams.startEditTime = undefined
    searchParams.endEditTime = undefined
  }
}

//范围预设
const rangePresets = ref([
  { label: '过去 7 天', value: [dayjs().add(-7, 'd'), dayjs()] },
  { label: '过去 14 天', value: [dayjs().add(-14, 'd'), dayjs()] },
  { label: '过去 30 天', value: [dayjs().add(-30, 'd'), dayjs()] },
  { label: '过去 90 天', value: [dayjs().add(-90, 'd'), dayjs()] },
])

//标签和分类选项
const categoryOptions = ref<{ value: string; label: string }[]>([])
const tagOptions = ref<{ value: string; label: string }[]>([])

/**
 * 获取标签和分类选项
 * @param values
 */
const getTagCategoryOptions = async () => {
  const res = await listPictureTagCategoryUsingGet()
  if (res.data.code === 0 && res.data.data) {
    tagOptions.value = (res.data.data.tagList ?? []).map((data: string) => {
      return {
        value: data,
        label: data,
      }
    })
    categoryOptions.value = (res.data.data.categoryList ?? []).map((data: string) => {
      return {
        value: data,
        label: data,
      }
    })
  } else {
    message.error('获取标签分类列表失败失败' + res.data.message)
  }
}
//挂载时获取标签和分类选项
onMounted(() => {
  getTagCategoryOptions()
})

//重置 reset
const doClean = () => {
  // 清空搜索条件
  Object.keys(searchParams).forEach((key) => {
    searchParams[key as keyof API.PictureQueryRequest] = undefined
  })
  // 清空日期
  dataRange.value = []
  // 清空之后重新搜索
  props.onSearch?.(searchParams)
}
</script>

<style scoped>
#picture-search-form :deep(.ant-form-item) {
  margin-top: 16px;
  min-width: 250px;
}
</style>
